<template>
  <div>
    <a-popover placement="bottom" v-model="fontVisible" trigger="click">
      <template v-slot:content>
        <a-input-search
          placeholder="搜索图标"
          @search="fontSearch"
          v-model="fontSearchValue"
        />
        <div :style="{ width: '260px', height: '250px', overflow: 'auto' }">
          <div class="font-container">
            <div class="my-font" v-for="(name,index) in classNames" :key="index" @click="fontClick(name)">
              <i :class="'iconfont '+name"></i>
            </div>      
          </div>
        </div>
      </template>
      <template v-slot:title>
        <span>图标</span>
      </template>
      <a-input
        :read-only="true"
        :value="value1"
        @click="mouseOver"
        :placeholder="placeholder"
        :disabled="disabled"
      >
      </a-input>
    </a-popover>
  </div>
</template>
 
<script>
const a = [
        "",
        "icon-caidan_hezi",
        "icon-keshiyufenxi",
        "icon-tianjixianx",
        "icon-Vuezujian-tianjixianfenxi-10",
        "icon-keshiyufenxi1",
        "icon-keshiyufenxi2",
        "icon-keshiyufenxi3",
        "icon-keshiyufenxi4",
        "icon-tianjixian",
        "icon-tianjixianfenxi",
        "icon-zhaorendaiban",
        "icon-shanchu6",
        "icon-celiang",
        "icon-dian",
        "icon-dingwei2",
        "icon-dingwei3",
        "icon-lujingmanyou",
        "icon-guangzhao",
        "icon-dianxuanweizhi",
        "icon-ditujuanlian",
        "icon-yingyan",
        "icon-diqiu1",
        "icon-manyou6",
        "icon-juanlian5",
        "icon-celiang1",
        "icon-dianxuanxiufu",
        "icon-yingyan1",
        "icon-guangzhao1",
        "icon-guangzhao2",
        "icon-icon-text-link",
        "icon-duihaocuohao55",
        "icon-gantanhao",
        "icon-duihao2",
        "icon-yingxiangduibitubiao",
        "icon-yingxiangduibi",
        "icon-houtai",
        "icon-houtai1",
        "icon-fenxi5",
        "icon-fenxi",
        "icon-fenxi1",
        "icon-fenxi2",
        "icon-shenhe1",
        "icon-shenhe2",
        "icon-shenhe3",
        "icon-shenhe4",
        "icon-jianzhu",
        "icon-loufang",
        "icon-louceng",
        "icon-jianzhu2",
        "icon-manyou1",
        "icon-ditu2",
        "icon-cegaodu",
        "icon-ditu3",
        "icon-manyou2",
        "icon-manyou3",
        "icon-manyou4",
        "icon-cegao",
        "icon-manyou5",
        "icon-cegaodu1",
        "icon-pouqie",
        "icon-mianpouqie",
        "icon-pouqie1",
        "icon-pouqie2",
        "icon-pouqie3",
        "icon-pouqie4",
        "icon-pouqie5",
        "icon-pouqie6",
        "icon-tipouqie",
        "icon-pouqie7",
        "icon-quyudingwei",
        "icon-tianqi1",
        "icon-juanlian1",
        "icon-dianxuan",
        "icon-juanlian3",
        "icon-juanlian4",
        "icon-dianxuan1",
        "icon-fenping1",
        "icon-xianshibaimo",
        "icon-quyu2",
        "icon-quyucopy",
        "icon-quyudingwei1",
        "icon-juanlian6",
        "icon-dianxuan2",
        "icon-juanlian7",
        "icon-quyudingwei2",
        "icon-fenping3",
        "icon-quyu3",
        "icon-baimo",
        "icon-fenping4",
        "icon-juanlian8",
        "icon-fenping5",
        "icon-quyudingwei3",
        "icon-ziyuan1",
        "icon-guanbi8",
        "icon-eraser",
        "icon-moxing2",
        "icon-iconfontdingweicopy",
        "icon-clear",
        "icon-zhibeizhen",
        "icon-chushihuashijiao",
        "icon-zhibeizhen1",
        "icon-zhibeizhen2",
        "icon-clear1",
        "icon-chushihuashijiao1",
        "icon-butoumingdu",
        "icon-zhibeizhen3",
        "icon-jibenyaosu",
        "icon-zhibeizhen4",
        "icon-butoumingdu1",
        "icon-butoumingdu2",
        "icon-Clearread",
        "icon-deshi",
        "icon-wendang",
        "icon-bofang2",
        "icon-manyou",
        "icon-shidianguanli",
        "icon-shidian",
        "icon-xuanzhong",
        "icon-xuanzhong1",
        "icon-xuanzhong2",
        "icon-moxing1",
        "icon-cankao",
        "icon-yaoganhecha",
        "icon-jichechuruduan",
        "icon-yujing1",
        "icon-bianxingjiance",
        "icon-jianshegongchengjungongceliangbaogao",
        "icon-_mars_gd",
        "icon-bianxingjiance1",
        "icon-jizhuangxiang",
        "icon-guidaoceliang",
        "icon-gongdi2",
        "icon-shouchizhongduan",
        "icon-chezaitai",
        "icon-shouchidanbing",
        "icon-renyuan1",
        "icon-jiancedian",
        "icon-chezhan_2x",
        "icon-tuli",
        "icon-fangxiang",
        "icon-gengxin",
        "icon-heliu",
        "icon-heliu1",
        "icon-heliu2",
        "icon-heliu3",
        "icon-hedaoshuiti",
        "icon-caodi",
        "icon-quanping2",
        "icon-huanfu",
        "icon-yunxiazai",
        "icon-jisuanjisuanshu",
        "icon-xiazai1x",
        "icon-gengduo1",
        "icon-select-copy",
        "icon-xuanze",
        "icon-xuanze1",
        "icon-xuanze2",
        "icon-qingchu2",
        "icon-qingchu3",
        "icon-qingchu4",
        "icon-shidu1",
        "icon-shijian4",
        "icon-fengli",
        "icon-shijian5",
        "icon-qiwen",
        "icon-qipao_huaban",
        "icon-shidu",
        "icon-renkouchaxun",
        "icon-zhuanfa",
        "icon-jiaotong",
        "icon-jiaotong1",
        "icon-zhihuilvyou",
        "icon-Micon-gongdi",
        "icon-huanbao1",
        "icon-huanbaozhuangxiu",
        "icon-shequ1",
        "icon-huabanfuben",
        "icon-gongdi",
        "icon-shequ",
        "icon-zhihuilvyou1",
        "icon-gongdi1",
        "icon-vr",
        "icon-yunweiguanli",
        "icon-jiansheguanli",
        "icon-kaifa",
        "icon-tuichu1",
        "icon-tuichu2",
        "icon-daochu-copy",
        "icon-daoru",
        "icon-jiaoseguanli",
        "icon-renyuanguanli",
        "icon-zuzhiguanli",
        "icon-jiaoseguanli1",
        "icon-zuzhiguanli1",
        "icon-shenpiguanli",
        "icon-jiaoseguanli2",
        "icon-shenpiguanli1",
        "icon-shenpiguanli2",
        "icon-renyuanguanli1",
        "icon-fangda1",
        "icon-fangda2",
        "icon-tiyuanquanicons-38",
        "icon-ganxie",
        "icon-tishi1",
        "icon-quanguoyundonghui-04",
        "icon-tishi2",
        "icon-jidi",
        "icon-tubiaozhizuomoban",
        "icon-hetong2",
        "icon-renyuan",
        "icon-mianji",
        "icon-ruyiliuwentikushenqing",
        "icon-quyu1",
        "icon-gangwei",
        "icon-nongye",
        "icon-zuola",
        "icon-hetong1",
        "icon-tiantubiao",
        "icon-hetong",
        "icon-guanliyuan",
        "icon-wulianwang",
        "icon-heguiqushi",
        "icon-zichan",
        "icon-UI_icon_zhuantitu",
        "icon-xitongguanli",
        "icon-contract2-fill",
        "icon-jurassic_admin",
        "icon-jurassic_company",
        "icon-zichanxianzhidixiaoyongdijianguan",
        "icon-maximize",
        "icon-xiaolian1",
        "icon-duomeitiicon-",
        "icon-suo1",
        "icon-fenping",
        "icon-juanlian2",
        "icon-fenping2",
        "icon-juanlian",
        "icon-hangdao",
        "icon-haishi",
        "icon-gongjiao",
        "icon-tielu1",
        "icon-yunshu",
        "icon-gangkou",
        "icon-jigou",
        "icon-jichang",
        "icon-tansuob",
        "icon-ditu1",
        "icon-icon-status-3",
        "icon-peixun",
        "icon-tongguo1",
        "icon-daxue",
        "icon-kaoshichangci",
        "icon-baifenbi",
        "icon-menu",
        "icon-sousuo2",
        "icon-weizhi2",
        "icon-biaoqian",
        "icon-suojin",
        "icon-suojin-copy",
        "icon-gengduo",
        "icon-shezhi",
        "icon-gangquguanli-zhengchang",
        "icon-suo",
        "icon-tongguo",
        "icon-duihao1",
        "icon-cuowu",
        "icon-gundongxiangxia",
        "icon-Url",
        "icon-weixian",
        "icon-yunxingzhuangtai",
        "icon-qitichuanganqi",
        "icon-qiyeyancongxinxi_",
        "icon-menjin",
        "icon-yancong",
        "icon-huanbao",
        "icon-paifang",
        "icon-weixian1",
        "icon-anquanguanli",
        "icon-yanghuguanli",
        "icon-yejingping",
        "icon-dubanzhenggai",
        "icon-daiduban",
        "icon-shengchanhuanjing",
        "icon-weixian2",
        "icon-yujing",
        "icon-yemian-copy-copy-copy-copy",
        "icon-qiti",
        "icon-jiankong",
        "icon-zanting",
        "icon-bofang1",
        "icon-ai19",
        "icon-ai19-copy",
        "icon-bianji1",
        "icon-bianji2",
        "icon-add",
        "icon-del-copy",
        "icon-coupon",
        "icon-youhuiquan2",
        "icon-shouji",
        "icon-caijian1",
        "icon-caijian2",
        "icon-caijian",
        "icon-gengduo-copy",
        "icon-icon-sanweifenxi",
        "icon-dizhizaihai",
        "icon-dixing",
        "icon-shui",
        "icon-adjustment",
        "icon-qingjia",
        "icon-paike",
        "icon-faqi",
        "icon-fufei",
        "icon-c",
        "icon-lishi",
        "icon-lishi-copy",
        "icon-jifen2",
        "icon-qimo_icon",
        "icon-chengji1",
        "icon-jifen3",
        "icon-jifen4",
        "icon-chengji2",
        "icon-dingdan",
        "icon-chufang",
        "icon-dangan",
        "icon-huiyuan",
        "icon-linggan",
        "icon-bianji",
        "icon-huangguan",
        "icon-dianzan",
        "icon-shuru",
        "icon-baogao",
        "icon-qiapian",
        "icon-kangfuke",
        "icon-chazhao",
        "icon-yuedu",
        "icon-xiaoxi2",
        "icon-kefu",
        "icon-xingji",
        "icon-tixing",
        "icon-rili",
        "icon-guanbi7",
        "icon-yujingfenxi",
        "icon-lou",
        "icon-lou1",
        "icon-d-arrow-down",
        "icon-suodingweizhi",
        "icon-xiaoxi1",
        "icon-zhuanti",
        "icon-weibiaoti--",
        "icon-tongji3",
        "icon-xiaoweishuiti",
        "icon-dili",
        "icon-zhoubianguanxian",
        "icon-tudi",
        "icon-yingji",
        "icon-bim",
        "icon-BIM",
        "icon-shipin",
        "icon-sandian1",
        "icon-guijihuifang",
        "icon-chuanbopinggu",
        "icon-chuanbojiaoyi",
        "icon-guanzhu",
        "icon-chuanboyunying",
        "icon-biaoji",
        "icon-01000",
        "icon-mudedi",
        "icon-quyu",
        "icon-guijihuifang1",
        "icon-weihu",
        "icon-guiji",
        "icon-zuobiaozhuanhuan",
        "icon-weihuguanli",
        "icon-fuwuzhuce",
        "icon-guiji1",
        "icon-yaoganjiance-",
        "icon-moxing",
        "icon-fuwuzhuceguanli",
        "icon-guiji2",
        "icon-tongji1",
        "icon-tongji2",
        "icon-tianjiaxiaoqu",
        "icon-ic__ic_xiaoqu",
        "icon-pingjia1",
        "icon-renminbi",
        "icon-zuoye",
        "icon-pingjia-copy",
        "icon-ico_home_appraise",
        "icon-zuoye1",
        "icon-zuoye2",
        "icon-shuaxin2",
        "icon-zuoye3",
        "icon-zhuanbanliebiao",
        "icon-zhuanban",
        "icon-pingjia2",
        "icon-fenxiangjilu",
        "icon-switch",
        "icon-dingwei1",
        "icon-fangzhenduixiang",
        "icon-chaxun",
        "icon-wangluofangzhen",
        "icon-dingwei",
        "icon-tuichu",
        "icon-tuichu-copy",
        "icon-guanbi6",
        "icon-chenggong1",
        "icon-dengdai",
        "icon-weixinzhifu",
        "icon-xingming",
        "icon-xingbie",
        "icon-nianling",
        "icon-ico_print",
        "icon-chenggong",
        "icon-htmal5icon23",
        "icon-shuaxin1",
        "icon-lianjie",
        "icon-bangzhu",
        "icon-shoucang",
        "icon-icon_on_the_down",
        "icon-list",
        "icon-duihao",
        "icon-gouwu",
        "icon-kebiao",
        "icon-kebiao-",
        "icon-kebiao1",
        "icon-jiaoyu6",
        "icon-jiaoyu5",
        "icon-jiaoyu2",
        "icon-jiaoyu3",
        "icon-jiaoyu4",
        "icon-caigou-xianxing",
        "icon-caigou",
        "icon-yonghu-xianxing",
        "icon-yonghu",
        "icon-people_fill",
        "icon-people",
        "icon-jiaoshixinxi",
        "icon-jiaoshi",
        "icon-jiaoshizhuanqu",
        "icon-cart",
        "icon-cartfill",
        "icon-icon-",
        "icon-huaxue",
        "icon-iconfontyingyu",
        "icon-shiyanshaobei2",
        "icon-citie-dianji",
        "icon-yingyu-tianchong",
        "icon-shu2",
        "icon-gongshi",
        "icon-huaxueqimin",
        "icon-user2",
        "icon-home2",
        "icon-home-fill",
        "icon-icon_on_the_top",
        "icon-weixin",
        "icon-dengdaiqueren",
        "icon-shouye2",
        "icon-wode",
        "icon-fenlei",
        "icon-zhishi",
        "icon-upload",
        "icon-shangchuan",
        "icon-xiaoguo",
        "icon-5juli",
        "icon-shijian3",
        "icon-miehuoqi",
        "icon-chengji",
        "icon-xiangpica",
        "icon-baobao",
        "icon-weibiaoti1",
        "icon-cidiandictionary",
        "icon-guo",
        "icon-youhuiquan",
        "icon-youhuiquan1",
        "icon-wenju",
        "icon-shuma",
        "icon-icon_success",
        "icon-leimupinleifenleileibie",
        "icon-jifen1",
        "icon-shangpin",
        "icon-jifen",
        "icon-icon_category",
        "icon-shangpin-",
        "icon-broadcast",
        "icon-tuijian",
        "icon-benshubook118",
        "icon-jiangbei",
        "icon-shu1",
        "icon-wenjian-wenben",
        "icon-chuangxinjingxuan",
        "icon-cuoti",
        "icon-bangdan",
        "icon-wechat",
        "icon-Group-",
        "icon-location",
        "icon-pingjia",
        "icon-gongjuxiang1",
        "icon-API",
        "icon-fuzhituceng",
        "icon-area",
        "icon-zonghe",
        "icon-ziyuanzhongxin",
        "icon-yingyong",
        "icon-yanjing2",
        "icon-qingchu1",
        "icon-sibianxing",
        "icon-juxing",
        "icon-zhiwei",
        "icon-correct-bold",
        "icon-yanjing1",
        "icon-jinggao",
        "icon-tucenggouxuan",
        "icon-gouxuanzhong",
        "icon-shanchu5",
        "icon-shijian2",
        "icon-shijian1",
        "icon-zhidi",
        "icon-zhiding",
        "icon-shuaxin",
        "icon-yanjing",
        "icon-zhuce",
        "icon-fuhe",
        "icon-seeuser",
        "icon-shenqing1",
        "icon-chakanjinzhan",
        "icon-wanshanziliao",
        "icon-xiaoxi",
        "icon-toudi",
        "icon-shouqi-copy",
        "icon-arr-left-copy2",
        "icon-shouqi-copy2",
        "icon-arr-left-up-copy",
        "icon-shouqi",
        "icon-arr-left",
        "icon-arr-up-copy",
        "icon-arr-left2",
        "icon-zhuxiao-copy",
        "icon-user1",
        "icon-qingchu-",
        "icon-0bangzhushouce",
        "icon-qingchu",
        "icon-toihk-help",
        "icon-xia-copy-copy",
        "icon-xia",
        "icon-you",
        "icon-zuo-copy",
        "icon-you-copy",
        "icon-up-copy",
        "icon-tianqi",
        "icon-yewu",
        "icon-sanwei",
        "icon-yingxiang",
        "icon-yingxiangditu",
        "icon-count",
        "icon-tongji",
        "icon-zhuzhuang",
        "icon-chart-pie-fill",
        "icon-stat_icon",
        "icon-gonggongfuwu",
        "icon-report",
        "icon-shenpi1",
        "icon-jianguan",
        "icon-tuceng2",
        "icon-tianjia",
        "icon-bukeyidongwenwu",
        "icon-wenwuguji",
        "icon-changcheng",
        "icon-yuanxing",
        "icon-juxing4",
        "icon-tijiao",
        "icon-cf-c15",
        "icon-mimaxiugai",
        "icon-shenpi",
        "icon-xitongxiaoxi",
        "icon-shenqing",
        "icon-xinzeng",
        "icon-gerenxinxi",
        "icon-chexiao",
        "icon-shanchu4",
        "icon-xiugai",
        "icon-wodefuwu",
        "icon-tielu",
        "icon-icongk",
        "icon-icon21",
        "icon-feiji",
        "icon-youzheng-hui",
        "icon-Basic",
        "icon-guandao",
        "icon-qiche-",
        "icon-suidaoguanli",
        "icon-sheshi",
        "icon-dianhua3",
        "icon-shu",
        "icon-qiandaoxuanzhong",
        "icon-kaoshi",
        "icon-dingweiweizhi",
        "icon-left",
        "icon-youjian",
        "icon-gonglu",
        "icon-xitong",
        "icon-shanchu2",
        "icon-shanchu3",
        "icon-yuandian",
        "icon-chizi",
        "icon-quanping1",
        "icon-jianhaocu",
        "icon-jiahao",
        "icon-quanzi",
        "icon-dayin",
        "icon-shanchu1",
        "icon-chizi_o",
        "icon-gongjuxiang",
        "icon-luxian",
        "icon-xiaotuziCduan-",
        "icon-honglvdengweizhang",
        "icon-ditu",
        "icon-guanbi5",
        "icon-guanbi4",
        "icon-guanbi3",
        "icon-yuan-copy",
        "icon-xinhao",
        "icon-luduanpeizhi",
        "icon-tingzhi-shixin",
        "icon-bofang",
        "icon-diqiu",
        "icon-c-gps",
        "icon-qiche",
        "icon-lunchuan",
        "icon-shishilukuang",
        "icon-wushuju",
        "icon-drgspingtairuanjianxitong37",
        "icon-right",
        "icon-dianhua2",
        "icon-home1",
        "icon-renwu",
        "icon-yonghuzaixian",
        "icon-lingdang",
        "icon-jiaoyujingli",
        "icon-jiaoyu1",
        "icon-dianhua1",
        "icon-dianhua",
        "icon-tishi",
        "icon-paixu",
        "icon-diliweizhi",
        "icon-guanbi2",
        "icon-guanbi1",
        "icon-guanbi",
        "icon-ai54",
        "icon-xiangxia2",
        "icon-xiangshang2",
        "icon-quxiaoquanping",
        "icon-sousuo1",
        "icon-shanchu",
        "icon-yidong",
        "icon-ceju",
        "icon-fangda",
        "icon-quanju_yuming",
        "icon-suoxiao",
        "icon-xiankuang",
        "icon-shuxingxuanze",
        "icon-box-select",
        "icon-yduidanxuankuangxuanzhong",
        "icon-webicon318",
        "icon-kuangxuan",
        "icon-tuceng",
        "icon-tuceng1",
        "icon-icon-dianjiduobianxing",
        "icon-quanping",
        "icon-fengxianyujing",
        "icon-information",
        "icon-home",
        "icon-fl-shuju",
        "icon-mn_dunpai_fill",
        "icon-weizhi1",
        "icon-shijian",
        "icon-riqi",
        "icon-icon-right",
        "icon-sanjiaoshang",
        "icon-sanjiaotop",
        "icon-sousuo",
        "icon-sanjiao_xia",
        "icon-parents",
        "icon-xiaolian",
        "icon-shejiao",
        "icon-jiaoyu",
        "icon-luoji",
        "icon-kaiguan3",
        "icon-bushufangan",
        "icon-weizhi",
        "icon-icon-yuanxk",
        "icon-user",
        "icon-ellipsis",
        "icon-wenjian",
        "icon-shenhe",
        "icon-icon",
        "icon-icon1",
        "icon-icon2",
        "icon-shouye",
        "icon-shouye1",
      ];
export default {
  name: "webgisButtonIcon",
  data() {
    return {
      fontVisible: false,
      fontSearchValue: null,
      value1: '',
      classNames: a
    };
  },
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    placeholder: {
      type: String,
      default: null
    },
    value: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(newdata){
      this.value1 = newdata
    }
  },
  methods: {
    mouseOver() {
      this.fontSearchValue = null;
    },
    fontSearch(value) {
      if (value) {
        this.classNames = a.filter(item => {
          return item.includes(value);
        });
      } else {
        this.classNames = a;
      }
    },
    fontClick(item) {
      this.value1 = item
      this.$emit("change", item);
      this.fontVisible = false;
    }
  }
};
</script>
 
<style scoped>
.font-container {
  font-size: 18px;
  width: 235px;
  height: 235px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: center;
}
.my-font {
  cursor: pointer;
  margin: 5px 5px 5px 5px;
  padding-top: 5px;
  text-align: center;
  border-radius: 6px;
  width: 45px;
  height: 40px;
  border: 1px solid #ccc;
}
.my-font:hover {
  background-color: rgba(206, 206, 206, 0.5);
}
</style>
